/**
 * 交易页面组件
 * 用于展示用户的交易列表，分为买入和卖出交易
 */

import React, { useEffect, useState } from 'react'
// 引入antd组件库中的相关组件
import { Card, Tabs, List, Avatar, Tag, Spin, Empty, Button, Space } from 'antd'
// 引入antd图标库中的相关图标
import { EyeOutlined, ShoppingCartOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
// 引入获取用户交易列表的API服务
import { getMyTrades } from '../services/api'
// 引入用户认证状态管理库
import { useAuthStore } from '@stores/auth'
// 引入路由导航钩子
import { useNavigate } from 'react-router-dom'

// 定义交易状态映射对象，包含状态颜色、文本和图标
const statusMap = {
  pending_payment: { color: 'orange', text: '待付款', icon: <ShoppingCartOutlined /> },
  paid: { color: 'blue', text: '已付款', icon: <CheckCircleOutlined /> },
  shipped: { color: 'purple', text: '已发货', icon: <CheckCircleOutlined /> },
  delivered: { color: 'cyan', text: '已送达', icon: <CheckCircleOutlined /> },
  completed: { color: 'green', text: '已完成', icon: <CheckCircleOutlined /> },
  cancelled: { color: 'red', text: '已取消', icon: <CloseCircleOutlined /> },
  refunded: { color: 'gray', text: '已退款', icon: <CloseCircleOutlined /> }
}

/**
 * 交易页面组件
 */
function TradesPage() {
  // 获取用户认证状态和用户信息
  const { isAuthenticated, user } = useAuthStore()
  // 获取路由导航函数
  const navigate = useNavigate()
  // 定义状态变量loading，用于控制页面加载状态，初始值为true
  const [loading, setLoading] = useState(true)
  // 定义状态变量trades，用于存储用户的交易列表，初始值为[]
  const [trades, setTrades] = useState([])

  // 使用useEffect钩子，在用户认证状态改变时调用fetchTrades函数获取交易列表
  useEffect(() => {
    if (!isAuthenticated) {
      return
    }
    fetchTrades()
  }, [isAuthenticated])

  /**
   * 获取用户交易列表的异步函数
   * 调用getMyTrades API获取交易信息
   */
  const fetchTrades = async () => {
    try {
      // 设置加载状态为true
      setLoading(true)
      // 调用API获取用户交易列表
      const response = await getMyTrades()
      // 如果API返回成功
      if (response.data.success) {
        // 更新交易列表状态
        setTrades(response.data.data || [])
      } else {
        // 若失败，将交易列表设置为空数组
        setTrades([])
      }
    } catch (error) {
      // 若出现错误，打印错误信息
      console.error('获取交易列表失败:', error)
      // 将交易列表设置为空数组
      setTrades([])
    } finally {
      // 无论成功或失败，都将加载状态设置为false
      setLoading(false)
    }
  }

  // 过滤出用户买入的交易
  const buyTrades = trades.filter(t => t.buyer_id === user?.id)
  // 过滤出用户卖出的交易
  const sellTrades = trades.filter(t => t.seller_id === user?.id)

  /**
   * 处理查看交易详情的函数
   * 跳转到指定交易的详情页面
   * @param {number} tradeId - 交易ID
   */
  const handleViewTrade = (tradeId) => {
    navigate(`/trades/${tradeId}`)
  }

  /**
   * 渲染交易列表项的函数
   * @param {Object} item - 交易对象
   */
  const renderTradeItem = item => (
    <List.Item
      actions={[
        // 查看详情按钮，点击时调用handleViewTrade函数
        <Button 
          type="link" 
          icon={<EyeOutlined />}
          onClick={() => handleViewTrade(item.id)}
        >
          查看详情
        </Button>
      ]}
    >
      <List.Item.Meta
        avatar={
          // 显示商品图片或默认图标
          <Avatar 
            src={item.Product?.ProductImages?.[0]?.image_url ? item.Product.ProductImages[0].image_url : undefined} 
            shape="square"
            size={64}
            icon={!item.Product?.ProductImages?.[0]?.image_url ? <ShoppingCartOutlined /> : undefined}
          />
        }
        title={
          <Space>
            {/* 显示商品名称或提示商品已删除 */}
            <span>{item.Product?.name || '商品已删除'}</span>
            {/* 显示交易状态标签 */}
            <Tag color={statusMap[item.status]?.color} icon={statusMap[item.status]?.icon}>
              {statusMap[item.status]?.text}
            </Tag>
          </Space>
        }
        description={
          <div>
            {/* 显示交易号 */}
            <div style={{ marginBottom: 4 }}>
              <strong>交易号：</strong>{item.trade_no}
            </div>
            {/* 显示交易金额 */}
            <div style={{ marginBottom: 4 }}>
              <strong>金额：</strong>￥{item.amount}
            </div>
            {/* 显示支付方式 */}
            <div style={{ marginBottom: 4 }}>
              <strong>支付方式：</strong>{item.payment_method}
            </div>
            {/* 显示买家用户名 */}
            <div style={{ marginBottom: 4 }}>
              <strong>买家：</strong>{item.Buyer?.username}
            </div>
            {/* 显示卖家用户名 */}
            <div style={{ marginBottom: 4 }}>
              <strong>卖家：</strong>{item.Seller?.username}
            </div>
            {/* 显示交易创建时间 */}
            <div style={{ color: '#999', fontSize: '12px' }}>
              创建时间：{item.createdAt?.slice(0, 19).replace('T', ' ')}
            </div>
          </div>
        }
      />
    </List.Item>
  )

  // 如果用户未认证，显示请先登录提示
  if (!isAuthenticated) {
    return (
      <div style={{ marginTop: 64, marginLeft: 200, minHeight: 'calc(100vh - 64px)', padding: '24px' }}>
        <Card>
          <Empty description="请先登录" />
        </Card>
      </div>
    )
  }

  return (
    <div style={{ marginTop: 64, marginLeft: isAuthenticated ? 200 : 0, minHeight: 'calc(100vh - 64px)', padding: '24px' }}>
      {/* 使用Card组件包裹内容，设置标题和样式 */}
      <Card title="我的交易" style={{ maxWidth: 1000, margin: '0 auto' }}>
        {/* 使用Tabs组件切换买入和卖出交易列表 */}
        <Tabs defaultActiveKey="buy">
          <Tabs.TabPane tab={`我买到的 (${buyTrades.length})`} key="buy">
            {/* 如果正在加载，显示加载图标 */}
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px' }}>
                <Spin size="large" />
              </div>
            ) : (
              // 显示买入交易列表
              <List
                dataSource={buyTrades}
                renderItem={renderTradeItem}
                locale={{ emptyText: <Empty description="暂无买入交易" /> }}
                pagination={{
                  pageSize: 10,
                  showSizeChanger: false,
                  showQuickJumper: true
                }}
              />
            )}
          </Tabs.TabPane>
          <Tabs.TabPane tab={`我卖出的 (${sellTrades.length})`} key="sell">
            {/* 如果正在加载，显示加载图标 */}
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px' }}>
                <Spin size="large" />
              </div>
            ) : (
              // 显示卖出交易列表
              <List
                dataSource={sellTrades}
                renderItem={renderTradeItem}
                locale={{ emptyText: <Empty description="暂无卖出交易" /> }}
                pagination={{
                  pageSize: 10,
                  showSizeChanger: false,
                  showQuickJumper: true
                }}
              />
            )}
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </div>
  )
}

// 导出交易页面组件
export default TradesPage 